<template>
    <div class="scroll-list-x-container" ref="root">
        <div
            class="scroll-button x-left"
            :class="{
                'scroll-button-bg-black': iconBg
            }"
            :style="{ display: showXLeft ? 'block' : 'none' }"
            @mousedown="scrollMouseDown(0)"
            @mouseup="scrollMouseUp"
            @mouseenter="scrollMouseEnter(0)"
            @mouseleave="scrollMouseLeave"
        >
            <ScIcon
                :iconClass="iconClassLeft"
                :iconClassHover="iconClassLeftHover"
                :class="`sc-fs-${iconSize}`"
            ></ScIcon>
        </div>
        <div
            class="scroll-wrapper"
            ref="scrollWrapper"
            :style="{ left: `${left}px` }"
        >
            <slot></slot>
        </div>
        <div
            class="scroll-button x-right"
            :class="{
                'scroll-button-bg-black': iconBg
            }"
            :style="{ display: showXRight ? 'block' : 'none' }"
            @mousedown="scrollMouseDown(1)"
            @mouseup="scrollMouseUp"
            @mouseenter="scrollMouseEnter(1)"
            @mouseleave="scrollMouseLeave"
        >
            <ScIcon
                :iconClass="iconClassRight"
                :iconClassHover="iconClassRightHover"
                :class="`sc-fs-${iconSize}`"
            ></ScIcon>
        </div>
    </div>
</template>

<script>
import { getDomObserver } from "../../../tools-js/observer";
export default {
    name: "ScScrollListX",
    props: {
        scrollStep: {
            type: Number,
            default: 50
        },
        /** 是否显示滚动按钮的背景 */
        iconBg: {
            type: Boolean,
            default: true
        },
        iconSize: {
            type: Number,
            default: 12
        },
        iconClassLeft: {
            type: String,
            default: "el-icon-caret-left"
        },
        iconClassLeftHover: {
            type: String,
            default: "el-icon-caret-left"
        },
        iconClassRight: {
            type: String,
            default: "el-icon-caret-right"
        },
        iconClassRightHover: {
            type: String,
            default: "el-icon-caret-right"
        }
    },
    data() {
        return {
            deltaW: 0,
            showXLeft: false,
            showXRight: false,
            left: 0,
            doScroll: false,
            scrollTimer: null,
            scrollPause: false,
            resizeHandler: null
        };
    },

    mounted() {
        this.showScrollButton();
        window.addEventListener("resize", this.showScrollButton);
        this.$EventBus.$on("resizePanel", this.showScrollButton);
        this.rootObserver = getDomObserver(
            this.$refs.scrollWrapper,
            this.showScrollButton
        );
    },
    destroyed() {
        window.removeEventListener("resize", this.showScrollButton);
        this.$EventBus.$off("resizePanel", this.showScrollButton);
        this.rootObserver && this.rootObserver.disconnect();
        this.scrollTimer && clearInterval(this.scrollTimer);
    },

    methods: {
        xScroll(type) {
            console.log("xScroll", type);
            if (this.doScroll && !this.scrollPause) {
                if (type === 1) {
                    this.scrollRight();
                } else {
                    this.left = Math.min(this.left + this.scrollStep, 0);
                    if (this.left === 0) this.showXLeft = false;
                    if (this.left > this.deltaW) this.showXRight = true;
                }
            } else if (this.scrollTimer) {
                clearInterval(this.scrollTimer);
            }
        },
        handleScrollRight() {
            this.calculateSize();
            this.scrollRight();
        },
        /** 向右滚动 */
        scrollRight() {
            this.left = Math.max(this.left - this.scrollStep, this.deltaW);
            console.log("scrollRight", {
                left: this.left,
                scrollStep: this.scrollStep,
                deltaW: this.deltaW
            });
            if (this.left < 0) {
                this.showXLeft = true;
            }
            if (this.left === this.deltaW) this.showXRight = false;
        },
        scrollMouseDown(type) {
            console.log("scrollMouseDown");
            if (this.doScroll && this.type !== this.currentScroll) {
                this.scrollPause = false;
            }

            this.doScroll = true;
            this.currentScroll = type;

            this.xScroll(type);
            this.scrollTimer && clearInterval(this.scrollTimer);
            this.scrollTimer = setInterval(this.xScroll, 300, type);
        },
        scrollMouseUp() {
            this.doScroll = false;
        },
        scrollMouseLeave() {
            console.log("scrollMouseLeave");
            if (this.doScroll && !this.scrollPause) {
                if (this.left === 0 || this.left === this.deltaW) {
                    this.doScroll = false;
                } else {
                    this.scrollPause = true;
                }
            }
        },
        scrollMouseEnter(type) {
            if (this.doScroll && type === this.currentScroll) {
                //must come back to the same button
                this.scrollPause = false;
                this.xScroll(type);
                this.scrollTimer && clearInterval(this.scrollTimer);
                this.scrollTimer = setInterval(this.xScroll, 300, type);
            }
        },
        calculateSize() {
            let wrapper = this.$refs["scrollWrapper"];
            let root = this.$refs["root"];
            if (root && wrapper) {
                this.deltaW = root.clientWidth - wrapper.clientWidth;
                
                if (this.deltaW < this.left) {
                    this.showXRight = true;
                } else {
                    this.showXRight = false;
                }

                if (this.left < 0) {
                    this.showXLeft = true;
                } else {
                    this.showXLeft = false;
                }
            }
        },
        showScrollButton() {
            if (!this.$refs.scrollWrapper) return;

            setTimeout(() => {
                this.calculateSize();
            }, 500);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.scroll-list-x-container {
    position: relative;
    min-height: 40px;

    .scroll-button {
        cursor: pointer;
        position: absolute;
        z-index: 51;
        min-height: 40px;
        color: #c0c0c0;
        &.scroll-button-bg-black {
            background: $bgColorGray;
        }
        > i,
        > .sc-icon {
            line-height: 40px;
        }

        &:hover {
            color: $green;
        }
        &.x-left {
            left: 0;
        }

        &.x-right {
            right: 0;
        }
        &.x-left,
        &.x-right {
            top: 50%;
            transform: translate(0, -50%);
        }
    }
    .scroll-wrapper {
        position: absolute;
        z-index: 50;
        display: flex;
        min-width: 100%;
        transition: left 0.2s;
        align-items: center;
        height: 100%;
        min-height: 40px;
        .filter-list {
            display: flex;
            align-items: center;
        }
    }
}
</style>
